<template>
  <div>
    <div class="top_btn">
      <div
        v-if="titArr.length>=1"
        class="btn_div"
        :class="[oneIsBool ? 'border-unactive' : '']"
        @click="handleClick(1)"
      >{{titArr[0]}}———</div>
      <div
        v-if="titArr.length>=2"
        class="btn_div two"
        :class="[twoIsBool ? 'border-unactive' : '']"
        @click="handleClick(2)"
      >{{titArr[1]}}- - - - -</div>
      <div
        v-if="titArr.length==3"
        class="btn_div three"
        :class="[threeIsBool ? 'border-unactive' : '']"
        @click="handleClick(3)"
      >{{titArr[2]}}·······</div>
    </div>
    <div class="alarm_visualization_configuration" ref="one"></div>
  </div>
</template>

<script>
import BarGraph from "@/components/BarGraph";

export default {
  components: {
    BarGraph
  },
  props: {
    titArr: {
      type: Array,
      default: ["传感器1", "传感器2", "传感器3"]
    }
  },
  data() {
    return {
      oneIsBool: false,
      twoIsBool: false,
      threeIsBool: false,
      option: null,
      x: true,
      y: true,
      z: true,
      series2: [
        {
          name: "X轴",
          type: "line",
          stack: "Total",
          data: [
            { name: `传感器1(X轴)`, value: 120 },
            { name: "传感器1(X轴)", value: -132 },
            { name: "传感器1(X轴)", value: 101 },
            { name: "传感器1(X轴)", value: 134 },
            { name: "传感器1(X轴)", value: 90 },
            { name: "传感器1(X轴)", value: 230 },
            { name: "传感器1(X轴)", value: 210 }
          ]
        },
        {
          name: "X轴",
          type: "line",
          stack: "Total",
          data: [
            { name: "传感器2(X轴)", value: 130 },
            { name: "传感器2(X轴)", value: -132 },
            { name: "传感器2(X轴)", value: 101 },
            { name: "传感器2(X轴)", value: 134 },
            { name: "传感器2(X轴)", value: 90 },
            { name: "传感器2(X轴)", value: 230 },
            { name: "传感器2(X轴)", value: 210 }
          ],
          itemStyle: {
            normal: {
              lineStyle: {
                width: 2,
                type: "dotted" //'dotted'虚线 'solid'实线
              }
            }
          }
        },
        {
          name: "Y轴",
          type: "line",
          stack: "Total",
          data: [
            { name: "传感器1(Y轴)", value: 150 },
            { name: "传感器1(Y轴)", value: -132 },
            { name: "传感器1(Y轴)", value: 101 },
            { name: "传感器1(Y轴)", value: 134 },
            { name: "传感器1(Y轴)", value: 90 },
            { name: "传感器1(Y轴)", value: 230 },
            { name: "传感器1(Y轴)", value: 210 }
          ]
        },
        {
          name: "Y轴",
          type: "line",
          stack: "Total",
          data: [
            { name: "传感器2(Y轴)", value: 140 },
            { name: "传感器2(Y轴)", value: -132 },
            { name: "传感器2(Y轴)", value: 101 },
            { name: "传感器2(Y轴)", value: 134 },
            { name: "传感器2(Y轴)", value: 90 },
            { name: "传感器2(Y轴)", value: 230 },
            { name: "传感器2(Y轴)", value: 210 }
          ],
          itemStyle: {
            normal: {
              lineStyle: {
                width: 2,
                type: "dotted" //'dotted'虚线 'solid'实线
              }
            }
          }
        },
        {
          name: "Z轴",
          type: "line",
          stack: "Total",
          data: [
            { name: "传感器1(Z轴)", value: 102 },
            { name: "传感器1(Z轴)", value: -132 },
            { name: "传感器1(Z轴)", value: 83 },
            { name: "传感器1(Z轴)", value: 234 },
            { name: "传感器1(Z轴)", value: 90 },
            { name: "传感器1(Z轴)", value: -230 },
            { name: "传感器1(Z轴)", value: 110 }
          ]
        },
        {
          name: "Z轴",
          type: "line",
          stack: "Total",
          data: [
            { name: "传感器2(Z轴)", value: 80 },
            { name: "传感器2(Z轴)", value: 123 },
            { name: "传感器2(Z轴)", value: -200 },
            { name: "传感器2(Z轴)", value: -134 },
            { name: "传感器2(Z轴)", value: 120 },
            { name: "传感器2(Z轴)", value: 130 },
            { name: "传感器2(Z轴)", value: -210 }
          ],
          itemStyle: {
            normal: {
              lineStyle: {
                width: 2,
                type: "dotted" //'dotted'虚线 'solid'实线
              }
            }
          }
        }
      ],
      series: []
      // series: [
      //   {
      //     name: "X轴",
      //     type: "line",
      //     stack: "Total",
      //     data: [
      //       { name: `传感器1(X轴)`, value: 120 },
      //       { name: "传感器1(X轴)", value: -132 },
      //       { name: "传感器1(X轴)", value: 101 },
      //       { name: "传感器1(X轴)", value: 134 },
      //       { name: "传感器1(X轴)", value: 90 },
      //       { name: "传感器1(X轴)", value: 230 },
      //       { name: "传感器1(X轴)", value: 210 }
      //     ]
      //   },
      //   {
      //     name: "X轴",
      //     type: "line",
      //     stack: "Total",
      //     data: [
      //       { name: "传感器2(X轴)", value: 130 },
      //       { name: "传感器2(X轴)", value: -132 },
      //       { name: "传感器2(X轴)", value: 101 },
      //       { name: "传感器2(X轴)", value: 134 },
      //       { name: "传感器2(X轴)", value: 90 },
      //       { name: "传感器2(X轴)", value: 230 },
      //       { name: "传感器2(X轴)", value: 210 }
      //     ],
      //     itemStyle: {
      //       normal: {
      //         lineStyle: {
      //           width: 2,
      //           type: "dotted" //'dotted'虚线 'solid'实线
      //         }
      //       }
      //     }
      //   },
      //   {
      //     name: "X轴",
      //     type: "line",
      //     stack: "Total",
      //     data: [
      //       { name: "传感器3(X轴)", value: -120 },
      //       { name: "传感器3(X轴)", value: -132 },
      //       { name: "传感器3(X轴)", value: 101 },
      //       { name: "传感器3(X轴)", value: 134 },
      //       { name: "传感器3(X轴)", value: 90 },
      //       { name: "传感器3(X轴)", value: 230 },
      //       { name: "传感器3(X轴)", value: 210 }
      //     ],
      //     itemStyle: {
      //       normal: {
      //         lineStyle: {
      //           width: 2,
      //           type: "dashed" //'dotted'虚线 'solid'实线
      //         }
      //       }
      //     }
      //   },
      //   {
      //     name: "Y轴",
      //     type: "line",
      //     stack: "Total",
      //     data: [
      //       { name: "传感器1(Y轴)", value: 150 },
      //       { name: "传感器1(Y轴)", value: -132 },
      //       { name: "传感器1(Y轴)", value: 101 },
      //       { name: "传感器1(Y轴)", value: 134 },
      //       { name: "传感器1(Y轴)", value: 90 },
      //       { name: "传感器1(Y轴)", value: 230 },
      //       { name: "传感器1(Y轴)", value: 210 }
      //     ]
      //   },
      //   {
      //     name: "Y轴",
      //     type: "line",
      //     stack: "Total",
      //     data: [
      //       { name: "传感器2(Y轴)", value: 140 },
      //       { name: "传感器2(Y轴)", value: -132 },
      //       { name: "传感器2(Y轴)", value: 101 },
      //       { name: "传感器2(Y轴)", value: 134 },
      //       { name: "传感器2(Y轴)", value: 90 },
      //       { name: "传感器2(Y轴)", value: 230 },
      //       { name: "传感器2(Y轴)", value: 210 }
      //     ],
      //     itemStyle: {
      //       normal: {
      //         lineStyle: {
      //           width: 2,
      //           type: "dotted" //'dotted'虚线 'solid'实线
      //         }
      //       }
      //     }
      //   },
      //   {
      //     name: "Y轴",
      //     type: "line",
      //     stack: "Total",
      //     data: [
      //       { name: "传感器3(Y轴)", value: 130 },
      //       { name: "传感器3(Y轴)", value: 32 },
      //       { name: "传感器3(Y轴)", value: -101 },
      //       { name: "传感器3(Y轴)", value: 134 },
      //       { name: "传感器3(Y轴)", value: 90 },
      //       { name: "传感器3(Y轴)", value: 230 },
      //       { name: "传感器3(Y轴)", value: 210 }
      //     ],
      //     itemStyle: {
      //       normal: {
      //         lineStyle: {
      //           width: 2,
      //           type: "dashed" //'dotted'虚线 'solid'实线
      //         }
      //       }
      //     }
      //   },
      //   {
      //     name: "Z轴",
      //     type: "line",
      //     stack: "Total",
      //     data: [
      //       { name: "传感器1(Z轴)", value: 102 },
      //       { name: "传感器1(Z轴)", value: -132 },
      //       { name: "传感器1(Z轴)", value: 83 },
      //       { name: "传感器1(Z轴)", value: 234 },
      //       { name: "传感器1(Z轴)", value: 90 },
      //       { name: "传感器1(Z轴)", value: -230 },
      //       { name: "传感器1(Z轴)", value: 110 }
      //     ]
      //   },
      //   {
      //     name: "Z轴",
      //     type: "line",
      //     stack: "Total",
      //     data: [
      //       { name: "传感器2(Z轴)", value: 80 },
      //       { name: "传感器2(Z轴)", value: 123 },
      //       { name: "传感器2(Z轴)", value: -200 },
      //       { name: "传感器2(Z轴)", value: -134 },
      //       { name: "传感器2(Z轴)", value: 120 },
      //       { name: "传感器2(Z轴)", value: 130 },
      //       { name: "传感器2(Z轴)", value: -210 }
      //     ],
      //     itemStyle: {
      //       normal: {
      //         lineStyle: {
      //           width: 2,
      //           type: "dotted" //'dotted'虚线 'solid'实线
      //         }
      //       }
      //     }
      //   },
      //   {
      //     name: "Z轴",
      //     type: "line",
      //     stack: "Total",
      //     data: [
      //       { name: "传感器3(Z轴)", value: 30 },
      //       { name: "传感器3(Z轴)", value: 132 },
      //       { name: "传感器3(Z轴)", value: -201 },
      //       { name: "传感器3(Z轴)", value: -134 },
      //       { name: "传感器3(Z轴)", value: 190 },
      //       { name: "传感器3(Z轴)", value: 130 },
      //       { name: "传感器3(Z轴)", value: -210 }
      //     ],
      //     itemStyle: {
      //       normal: {
      //         lineStyle: {
      //           width: 2,
      //           type: "dashed" //'dotted'虚线 'solid'实线
      //         }
      //       }
      //     }
      //   }
      // ]
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initEcharts();
      // if(this.titArr.length == 3){
      //   console.log('加载的initEcharts');
      //   this.initEcharts();
      // }
      // if(this.titArr.length == 2){
      //   console.log('加载的initEcharts2222');
      //   this.initEcharts2()
      // }
    });
  },
  watch: {
    titArr: {
      handler(list) {
        if (list.length == 1) {
          this.series = [
            {
              name: "X轴",
              type: "line",
              stack: "Total",
              data: [
                { name: `传感器1(X轴)`, value: 120 },
                { name: "传感器1(X轴)", value: -132 },
                { name: "传感器1(X轴)", value: 101 },
                { name: "传感器1(X轴)", value: 134 },
                { name: "传感器1(X轴)", value: 90 },
                { name: "传感器1(X轴)", value: 230 },
                { name: "传感器1(X轴)", value: 210 }
              ]
            },
            {
              name: "Y轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器1(Y轴)", value: 150 },
                { name: "传感器1(Y轴)", value: -132 },
                { name: "传感器1(Y轴)", value: 101 },
                { name: "传感器1(Y轴)", value: 134 },
                { name: "传感器1(Y轴)", value: 90 },
                { name: "传感器1(Y轴)", value: 230 },
                { name: "传感器1(Y轴)", value: 210 }
              ]
            },
            {
              name: "Z轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器1(Z轴)", value: 102 },
                { name: "传感器1(Z轴)", value: -132 },
                { name: "传感器1(Z轴)", value: 83 },
                { name: "传感器1(Z轴)", value: 234 },
                { name: "传感器1(Z轴)", value: 90 },
                { name: "传感器1(Z轴)", value: -230 },
                { name: "传感器1(Z轴)", value: 110 }
              ]
            }
          ];
        } else if (list.length == 2) {
          this.series = [
            {
              name: "X轴",
              type: "line",
              stack: "Total",
              data: [
                { name: `传感器1(X轴)`, value: 120 },
                { name: "传感器1(X轴)", value: -132 },
                { name: "传感器1(X轴)", value: 101 },
                { name: "传感器1(X轴)", value: 134 },
                { name: "传感器1(X轴)", value: 90 },
                { name: "传感器1(X轴)", value: 230 },
                { name: "传感器1(X轴)", value: 210 }
              ]
            },
            {
              name: "X轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器2(X轴)", value: 130 },
                { name: "传感器2(X轴)", value: -132 },
                { name: "传感器2(X轴)", value: 101 },
                { name: "传感器2(X轴)", value: 134 },
                { name: "传感器2(X轴)", value: 90 },
                { name: "传感器2(X轴)", value: 230 },
                { name: "传感器2(X轴)", value: 210 }
              ],
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 2,
                    type: "dotted" //'dotted'虚线 'solid'实线
                  }
                }
              }
            },
            {
              name: "Y轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器1(Y轴)", value: 150 },
                { name: "传感器1(Y轴)", value: -132 },
                { name: "传感器1(Y轴)", value: 101 },
                { name: "传感器1(Y轴)", value: 134 },
                { name: "传感器1(Y轴)", value: 90 },
                { name: "传感器1(Y轴)", value: 230 },
                { name: "传感器1(Y轴)", value: 210 }
              ]
            },
            {
              name: "Y轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器2(Y轴)", value: 140 },
                { name: "传感器2(Y轴)", value: -132 },
                { name: "传感器2(Y轴)", value: 101 },
                { name: "传感器2(Y轴)", value: 134 },
                { name: "传感器2(Y轴)", value: 90 },
                { name: "传感器2(Y轴)", value: 230 },
                { name: "传感器2(Y轴)", value: 210 }
              ],
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 2,
                    type: "dotted" //'dotted'虚线 'solid'实线
                  }
                }
              }
            },
            {
              name: "Z轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器1(Z轴)", value: 102 },
                { name: "传感器1(Z轴)", value: -132 },
                { name: "传感器1(Z轴)", value: 83 },
                { name: "传感器1(Z轴)", value: 234 },
                { name: "传感器1(Z轴)", value: 90 },
                { name: "传感器1(Z轴)", value: -230 },
                { name: "传感器1(Z轴)", value: 110 }
              ]
            },
            {
              name: "Z轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器2(Z轴)", value: 80 },
                { name: "传感器2(Z轴)", value: 123 },
                { name: "传感器2(Z轴)", value: -200 },
                { name: "传感器2(Z轴)", value: -134 },
                { name: "传感器2(Z轴)", value: 120 },
                { name: "传感器2(Z轴)", value: 130 },
                { name: "传感器2(Z轴)", value: -210 }
              ],
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 2,
                    type: "dotted" //'dotted'虚线 'solid'实线
                  }
                }
              }
            }
          ];
        } else {
          this.series = [
            {
              name: "X轴",
              type: "line",
              stack: "Total",
              data: [
                { name: `传感器1(X轴)`, value: 120 },
                { name: "传感器1(X轴)", value: -132 },
                { name: "传感器1(X轴)", value: 101 },
                { name: "传感器1(X轴)", value: 134 },
                { name: "传感器1(X轴)", value: 90 },
                { name: "传感器1(X轴)", value: 230 },
                { name: "传感器1(X轴)", value: 210 }
              ]
            },
            {
              name: "X轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器2(X轴)", value: 130 },
                { name: "传感器2(X轴)", value: -132 },
                { name: "传感器2(X轴)", value: 101 },
                { name: "传感器2(X轴)", value: 134 },
                { name: "传感器2(X轴)", value: 90 },
                { name: "传感器2(X轴)", value: 230 },
                { name: "传感器2(X轴)", value: 210 }
              ],
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 2,
                    type: "dotted" //'dotted'虚线 'solid'实线
                  }
                }
              }
            },
            {
              name: "X轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器3(X轴)", value: -120 },
                { name: "传感器3(X轴)", value: -132 },
                { name: "传感器3(X轴)", value: 101 },
                { name: "传感器3(X轴)", value: 134 },
                { name: "传感器3(X轴)", value: 90 },
                { name: "传感器3(X轴)", value: 230 },
                { name: "传感器3(X轴)", value: 210 }
              ],
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 2,
                    type: "dashed" //'dotted'虚线 'solid'实线
                  }
                }
              }
            },
            {
              name: "Y轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器1(Y轴)", value: 150 },
                { name: "传感器1(Y轴)", value: -132 },
                { name: "传感器1(Y轴)", value: 101 },
                { name: "传感器1(Y轴)", value: 134 },
                { name: "传感器1(Y轴)", value: 90 },
                { name: "传感器1(Y轴)", value: 230 },
                { name: "传感器1(Y轴)", value: 210 }
              ]
            },
            {
              name: "Y轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器2(Y轴)", value: 140 },
                { name: "传感器2(Y轴)", value: -132 },
                { name: "传感器2(Y轴)", value: 101 },
                { name: "传感器2(Y轴)", value: 134 },
                { name: "传感器2(Y轴)", value: 90 },
                { name: "传感器2(Y轴)", value: 230 },
                { name: "传感器2(Y轴)", value: 210 }
              ],
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 2,
                    type: "dotted" //'dotted'虚线 'solid'实线
                  }
                }
              }
            },
            {
              name: "Y轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器3(Y轴)", value: 130 },
                { name: "传感器3(Y轴)", value: 32 },
                { name: "传感器3(Y轴)", value: -101 },
                { name: "传感器3(Y轴)", value: 134 },
                { name: "传感器3(Y轴)", value: 90 },
                { name: "传感器3(Y轴)", value: 230 },
                { name: "传感器3(Y轴)", value: 210 }
              ],
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 2,
                    type: "dashed" //'dotted'虚线 'solid'实线
                  }
                }
              }
            },
            {
              name: "Z轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器1(Z轴)", value: 102 },
                { name: "传感器1(Z轴)", value: -132 },
                { name: "传感器1(Z轴)", value: 83 },
                { name: "传感器1(Z轴)", value: 234 },
                { name: "传感器1(Z轴)", value: 90 },
                { name: "传感器1(Z轴)", value: -230 },
                { name: "传感器1(Z轴)", value: 110 }
              ]
            },
            {
              name: "Z轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器2(Z轴)", value: 80 },
                { name: "传感器2(Z轴)", value: 123 },
                { name: "传感器2(Z轴)", value: -200 },
                { name: "传感器2(Z轴)", value: -134 },
                { name: "传感器2(Z轴)", value: 120 },
                { name: "传感器2(Z轴)", value: 130 },
                { name: "传感器2(Z轴)", value: -210 }
              ],
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 2,
                    type: "dotted" //'dotted'虚线 'solid'实线
                  }
                }
              }
            },
            {
              name: "Z轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器3(Z轴)", value: 30 },
                { name: "传感器3(Z轴)", value: 132 },
                { name: "传感器3(Z轴)", value: -201 },
                { name: "传感器3(Z轴)", value: -134 },
                { name: "传感器3(Z轴)", value: 190 },
                { name: "传感器3(Z轴)", value: 130 },
                { name: "传感器3(Z轴)", value: -210 }
              ],
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 2,
                    type: "dashed" //'dotted'虚线 'solid'实线
                  }
                }
              }
            }
          ];
        }
        this.updateEcharts()
      },
      immediate: true
    },
    x(val) {
      if (val) {
        // alert("打开X轴");
      } else {
        // alert("关闭X轴");
      }
    },
    y(val) {
      if (val) {
        // alert("打开Y轴");
      } else {
        // alert("关闭Y轴");
      }
    },
    z(val) {
      if (val) {
        // alert("打开Z轴");
      } else {
        // alert("关闭Z轴");
      }
    }
  },
  methods: {
    handleClick(type) {
      if (type == 1) {
        this.oneIsBool = !this.oneIsBool;
        if (this.oneIsBool) {
          // 关闭
          this.series.forEach((item, idx) => {
            if (item.data[0].name.includes("传感器1")) {
              this.$delete(this.series, idx);
            }
          });
        } else {
          // 打开
          const arr = [
            {
              name: "X轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器1(X轴)", value: 120 },
                { name: "传感器1(X轴)", value: -132 },
                { name: "传感器1(X轴)", value: 101 },
                { name: "传感器1(X轴)", value: 134 },
                { name: "传感器1(X轴)", value: 90 },
                { name: "传感器1(X轴)", value: 230 },
                { name: "传感器1(X轴)", value: 210 }
              ]
            },
            {
              name: "Y轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器1(Y轴)", value: 150 },
                { name: "传感器1(Y轴)", value: -132 },
                { name: "传感器1(Y轴)", value: 101 },
                { name: "传感器1(Y轴)", value: 134 },
                { name: "传感器1(Y轴)", value: 90 },
                { name: "传感器1(Y轴)", value: 230 },
                { name: "传感器1(Y轴)", value: 210 }
              ]
            },
            {
              name: "Z轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器1(Z轴)", value: 102 },
                { name: "传感器1(Z轴)", value: -132 },
                { name: "传感器1(Z轴)", value: 83 },
                { name: "传感器1(Z轴)", value: 234 },
                { name: "传感器1(Z轴)", value: 90 },
                { name: "传感器1(Z轴)", value: -230 },
                { name: "传感器1(Z轴)", value: 110 }
              ]
            }
          ];
          this.series.push(...arr);
        }
      } else if (type == 2) {
        this.twoIsBool = !this.twoIsBool;
        if (this.twoIsBool) {
          // 关闭
          this.series.forEach((item, idx) => {
            if (item.data[0].name.includes("传感器2")) {
              this.$delete(this.series, idx);
            }
          });
        } else {
          // 打开
          const arr = [
            {
              name: "X轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器2(X轴)", value: 130 },
                { name: "传感器2(X轴)", value: -132 },
                { name: "传感器2(X轴)", value: 101 },
                { name: "传感器2(X轴)", value: 134 },
                { name: "传感器2(X轴)", value: 90 },
                { name: "传感器2(X轴)", value: 230 },
                { name: "传感器2(X轴)", value: 210 }
              ],
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 2,
                    type: "dotted" //'dotted'虚线 'solid'实线
                  }
                }
              }
            },
            {
              name: "Y轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器2(Y轴)", value: 140 },
                { name: "传感器2(Y轴)", value: -132 },
                { name: "传感器2(Y轴)", value: 101 },
                { name: "传感器2(Y轴)", value: 134 },
                { name: "传感器2(Y轴)", value: 90 },
                { name: "传感器2(Y轴)", value: 230 },
                { name: "传感器2(Y轴)", value: 210 }
              ],
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 2,
                    type: "dotted" //'dotted'虚线 'solid'实线
                  }
                }
              }
            },
            {
              name: "Z轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器2(Z轴)", value: 80 },
                { name: "传感器2(Z轴)", value: 123 },
                { name: "传感器2(Z轴)", value: -200 },
                { name: "传感器2(Z轴)", value: -134 },
                { name: "传感器2(Z轴)", value: 120 },
                { name: "传感器2(Z轴)", value: 130 },
                { name: "传感器2(Z轴)", value: -210 }
              ],
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 2,
                    type: "dotted" //'dotted'虚线 'solid'实线
                  }
                }
              }
            }
          ];
          this.series.push(...arr);
        }
      } else {
        this.threeIsBool = !this.threeIsBool;
        if (this.threeIsBool) {
          // 关闭
          this.series.forEach((item, idx) => {
            if (item.data[0].name.includes("传感器3")) {
              this.$delete(this.series, idx);
            }
          });
        } else {
          // 打开
          const arr = [
            {
              name: "X轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器3(X轴)", value: -120 },
                { name: "传感器3(X轴)", value: -132 },
                { name: "传感器3(X轴)", value: 101 },
                { name: "传感器3(X轴)", value: 134 },
                { name: "传感器3(X轴)", value: 90 },
                { name: "传感器3(X轴)", value: 230 },
                { name: "传感器3(X轴)", value: 210 }
              ],
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 2,
                    type: "dashed" //'dotted'虚线 'solid'实线
                  }
                }
              }
            },
            {
              name: "Y轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器3(Y轴)", value: 130 },
                { name: "传感器3(Y轴)", value: 32 },
                { name: "传感器3(Y轴)", value: -101 },
                { name: "传感器3(Y轴)", value: 134 },
                { name: "传感器3(Y轴)", value: 90 },
                { name: "传感器3(Y轴)", value: 230 },
                { name: "传感器3(Y轴)", value: 210 }
              ],
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 2,
                    type: "dashed" //'dotted'虚线 'solid'实线
                  }
                }
              }
            },
            {
              name: "Z轴",
              type: "line",
              stack: "Total",
              data: [
                { name: "传感器3(Z轴)", value: 30 },
                { name: "传感器3(Z轴)", value: 132 },
                { name: "传感器3(Z轴)", value: -201 },
                { name: "传感器3(Z轴)", value: -134 },
                { name: "传感器3(Z轴)", value: 190 },
                { name: "传感器3(Z轴)", value: 130 },
                { name: "传感器3(Z轴)", value: -210 }
              ],
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 2,
                    type: "dashed" //'dotted'虚线 'solid'实线
                  }
                }
              }
            }
          ];
          this.series.push(...arr);
        }
      }
      if (this.oneIsBool && this.twoIsBool && this.threeIsBool) {
        this.series = [];
      }
      if (this.oneIsBool) {
        this.series.forEach((item, idx) => {
          console.log("name`````", item.data[0].name);
          if (item.data[0].name.includes("传感器1")) {
            this.$delete(this.series, idx);
            console.log(1);
          }
        });
      }
      if (this.twoIsBool) {
        this.series.forEach((item, idx) => {
          if (item.data[0].name.includes("传感器2")) {
            this.$delete(this.series, idx);
          }
        });
      }
      if (this.threeIsBool) {
        this.series.forEach((item, idx) => {
          if (item.data[0].name.includes("传感器3")) {
            this.$delete(this.series, idx);
          }
        });
      }
      this.$set(this.option, "series", this.series);

      console.log("series", this.series);
      this.updateEcharts();
    },
    updateEcharts() {
      const echarts = require("echarts");
      this.$echarts.dispose(this.$refs["one"]);
      const myChart = this.$echarts.init(this.$refs["one"]);
      const _this = this;
      myChart.on("legendselectchanged", function(paramas) {
        console.log(paramas);
        if (paramas.name == "X轴") {
          if (paramas.selected["X轴"]) {
            // alert("打开X轴");
            _this.x = true;
            console.log("xxxxxxxx", _this.x);
          } else {
            // alert("关闭X轴");
            _this.x = false;
            console.log("xxxxxxxx2", _this.x);
          }
        } else if (paramas.name == "Y轴") {
          if (paramas.selected["Y轴"]) {
            // alert("打开Y轴");
            _this.y = true;
          } else {
            // alert("关闭Y轴");
            _this.y = false;
          }
        } else {
          if (paramas.selected["Z轴"]) {
            // alert("打开Z轴");
            _this.z = true;
          } else {
            // alert("关闭Z轴");
            _this.z = false;
          }
        }
      });
      this.$set(this.option, 'series', this.series)
      myChart.setOption(this.option);
    },
    initEcharts() {
      const echarts = require("echarts");
      const myChart = this.$echarts.init(this.$refs["one"]);
      const _this = this;
      myChart.on("legendselectchanged", function(paramas) {
        console.log(paramas);
        if (paramas.name == "X轴") {
          if (paramas.selected["X轴"]) {
            // alert("打开X轴");
            _this.x = true;
          } else {
            // alert("关闭X轴");
            _this.x = false;
          }
        } else if (paramas.name == "Y轴") {
          if (paramas.selected["Y轴"]) {
            // alert("打开Y轴");
            _this.y = true;
          } else {
            // alert("关闭Y轴");
            _this.y = false;
          }
        } else {
          if (paramas.selected["Z轴"]) {
            // alert("打开Z轴");
            _this.z = true;
          } else {
            // alert("关闭Z轴");
            _this.z = false;
          }
        }
      });

      this.option = {
        // title: {
        //   text: "传感器详情"
        // },
        tooltip: {
          trigger: "axis",
          formatter: function(info) {
            console.log(info);
            var res = null;
            if (info.length == 9) {
              res = `<div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[0].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[0].name + ": " + info[0].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[0].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[1].name + ": " + info[1].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[0].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[2].name + ": " + info[2].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[4].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[3].name + ": " + info[3].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[4].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[4].name + ": " + info[4].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[4].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[5].name + ": " + info[5].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[7].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[6].name + ": " + info[6].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[7].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[7].name + ": " + info[7].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[7].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[8].name + ": " + info[8].value}</span>
              </div>`;
            }
            if (info.length == 6) {
              res = `<div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[0].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[0].name + ": " + info[0].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[0].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[1].name + ": " + info[1].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[0].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[2].name + ": " + info[2].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[4].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[3].name + ": " + info[3].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[4].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[4].name + ": " + info[4].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[4].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[5].name + ": " + info[5].value}</span>
              </div>`;
            }
            if (info.length == 3) {
              res = `<div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[0].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[0].name + ": " + info[0].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[0].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[1].name + ": " + info[1].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[0].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[2].name + ": " + info[2].value}</span>
              </div>`;
            }
            return res;
          }
        },
        legend: {
          // data: ["X轴", "Y轴", "Z轴"],
          data: [
            {
              name: "X轴",
              lineStyle: {
                type: "solid"
              }
            },
            {
              name: "Y轴",
              lineStyle: {
                type: "solid"
              }
            },
            {
              name: "Z轴",
              lineStyle: {
                type: "solid"
              }
            }
          ],
          selected: {}
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2023/7/19 9:21",
            "2023/7/19 9:31",
            "2023/7/19 9:41",
            "2023/7/19 9:51",
            "2023/7/19 10:01",
            "2023/7/19 10:11",
            "2023/7/19 10:21"
          ]
        },
        dataZoom: [
          {
            type: "slider", //inside鼠标缩放
            show: true,
            start: 0,
            end: 100,
            xAxisIndex: [0]
          }
        ],
        yAxis: {
          type: "value"
        },
        series: this.series
      };
      myChart.setOption(this.option);
    },
    initEcharts2() {
      const echarts = require("echarts");
      const myChart = this.$echarts.init(this.$refs["one"]);
      const _this = this;
      myChart.on("legendselectchanged", function(paramas) {
        console.log(paramas);
        if (paramas.name == "X轴") {
          if (paramas.selected["X轴"]) {
            // alert("打开X轴");
            _this.x = true;
          } else {
            // alert("关闭X轴");
            _this.x = false;
          }
        } else if (paramas.name == "Y轴") {
          if (paramas.selected["Y轴"]) {
            // alert("打开Y轴");
            _this.y = true;
          } else {
            // alert("关闭Y轴");
            _this.y = false;
          }
        } else {
          if (paramas.selected["Z轴"]) {
            // alert("打开Z轴");
            _this.z = true;
          } else {
            // alert("关闭Z轴");
            _this.z = false;
          }
        }
      });

      this.option = {
        // title: {
        //   text: "传感器详情"
        // },
        tooltip: {
          trigger: "axis",
          formatter: function(info) {
            console.log(info);
            var res = null;
            if (info.length == 9) {
              res = `<div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[0].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[0].name + ": " + info[0].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[0].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[1].name + ": " + info[1].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[0].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[2].name + ": " + info[2].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[4].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[3].name + ": " + info[3].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[4].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[4].name + ": " + info[4].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[4].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[5].name + ": " + info[5].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[7].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[6].name + ": " + info[6].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[7].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[7].name + ": " + info[7].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[7].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[8].name + ": " + info[8].value}</span>
              </div>`;
            }
            if (info.length == 6) {
              res = `<div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[0].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[0].name + ": " + info[0].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[0].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[1].name + ": " + info[1].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[0].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[2].name + ": " + info[2].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[4].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[3].name + ": " + info[3].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[4].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[4].name + ": " + info[4].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[4].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[5].name + ": " + info[5].value}</span>
              </div>`;
            }
            if (info.length == 3) {
              res = `<div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[0].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[0].name + ": " + info[0].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[0].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[1].name + ": " + info[1].value}</span>
              </div>
              <div>
                  <div style="
                              display: inline-block;
                              width:  10px;
                              height: 20px;
                              color: ${info[0].color}
                          "
                  >
                      ●
                  </div>
                  <span>${info[2].name + ": " + info[2].value}</span>
              </div>`;
            }
            return res;
          }
        },
        legend: {
          // data: ["X轴", "Y轴", "Z轴"],
          data: [
            {
              name: "X轴",
              lineStyle: {
                type: "solid"
              }
            },
            {
              name: "Y轴",
              lineStyle: {
                type: "solid"
              }
            },
            {
              name: "Z轴",
              lineStyle: {
                type: "solid"
              }
            }
          ],
          selected: {}
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2023/7/19 9:21",
            "2023/7/19 9:31",
            "2023/7/19 9:41",
            "2023/7/19 9:51",
            "2023/7/19 10:01",
            "2023/7/19 10:11",
            "2023/7/19 10:21"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: this.series2
      };
      myChart.setOption(this.option);
    }
  }
};
</script>

<style scoped>
.alarm_visualization_configuration {
  width: 100%;
  height: 500px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}
.top_btn {
  display: flex;
  margin-bottom: 20px;
  position: absolute;
  z-index: 10;
}
.btn_div {
  width: 110px;
  cursor: pointer;
  border: 1px solid red;
  margin-left: 20px;
  color: 1;
  user-select: none;
}
.two {
  border-style: dashed;
}
.three {
  border-style: dotted;
}
.border-unactive {
  border-color: transparent;
}
.box_ball_div_one_first {
  display: flex;
  padding: 20px 100px;
  align-items: center;
  box-sizing: border-box;
  justify-content: center;
}
.coordinate_system {
  display: flex;
  width: 60%;
  margin-left: 20%;
  position: absolute;
}
</style>
